<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
    export default {
        name: 'bar',
        props: {
            data: {
                type: Object,
                default() {
                    return {};
                },
            },
            title: {
                type: String,
                default: '',
            },
            position: {
                type: Array,
                default() {
                    return [34, 50, 20, 46];
                },
            }
        },
        data: () => ({}),
        mounted() {
            this.drawChart();
        },
        methods: {
            drawChart() {
                const {myChart} = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        title: {
                            text: this.title,
                            left: 6,
                            textStyle: {
                                color: '#069DFD',
                                fontSize: 12,
                                fontWeight: 400,
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                            backgroundColor: "rgba(255,255,255,0.85)", //设置背景图片 rgba格式
                            color: "black",
                            borderWidth: "1", //边框宽度设置1
                            borderColor: "gray", //设置边框颜色
                            textStyle: {
                                color: "black" //设置文字颜色
                            },
                        },
                        grid: {
                            top: this.position[0],
                            left: this.position[1],
                            right: this.position[2],
                            bottom: this.position[3],
                        },
                        xAxis: {
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 22,
                                color: '#069DFD',
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#069DFD',
                                },
                            },
                            data: this.data.name,
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: `{value}`,
                                color: '#069DFD',
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0C2686',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#0C2686',
                                },
                            },
                        },
                        series: [{
                            itemStyle: {
                                color: this.$echarts.graphic.LinearGradient(// 柱子颜色
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#00EAFF'},
                                        {offset: 1, color: '#0095FD'},
                                    ],
                                ),
                                borderRadius: [5, 5, 0, 0],
                            },
                            barWidth: 6,
                            data: this.data.value,
                            type: 'bar',
                        }],
                    };
                    thisChart.setOption(option);
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            },
        },
    };
</script>
<style lang="less" scoped>

</style>
